<#include "../common/header.htm">
<div class="content-wrapper" id="one_key_search_Data">
    <button type="button" class="btn btn-primary" onclick="window.location.href='/onekey/list'">返回模板列表</button>
    <div style="margin-top: 1px;">
        <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                        width="70"
                        type="index"
                        label="序号" v-if="tableData.length">
                </el-table-column>
                <el-table-column
                        v-for="(field, index) in fieldList"
                        :prop="field"
                        :label="field"
                        :width="widthList[index]"
                >
                    <template slot-scope="scope">
                        <span :title="scope.row[field]" class="overflow">{{ scope.row[field] }}</span>
                    </template>
                </el-table-column>
        </el-table>
        <el-pagination
                background
                :current-page.sync="currentPage"
                :page-size="pageSize"
                @size-change="handleSizeChange"
                :page-sizes="[20, 50, 100, 200]"
                @current-change="handleCurrentChange"
                layout="total,sizes,prev, pager, next"
                :total="total">
        </el-pagination>
    </div>
</div>
<!--<link rel="stylesheet" href="${ctx}/bower_components/vue/css/element-ui.css">
<script src="${ctx}/bower_components/vue/js/vue.min.js"></script>
<script src="${ctx}/bower_components/vue/js/element-ui.js"></script>
<script src="${ctx}/bower_components/vue/js/axios.js"></script>-->
<script type="text/javascript">
    let tablename = '${tablename}';
    var vm=new Vue({
        el: '#one_key_search_Data',
        data:{
            tableData: [],
            currentPage:1,
            pageSize:20,
            total:0,
            fieldList:[],
            widthList:[]
        },
        created:function () {
            this.getlist();
        },
        methods:{
            handleSizeChange(val){
                this.pageSize=val;
                this.getlist();
            },
            handleCurrentChange(val){
                vm.currentPage = val;
                vm.getlist();
            },
            getlist(){
                axios.post('${ctx}/onekey_dataSource/list/'+this.currentPage+'/'+this.pageSize, {
                    "tablename":tablename
                }).then(function (response) {
                    vm.fieldList=response.data.data.allRows.field;
                    vm.widthList=response.data.data.allRows.width;
                    vm.tableData=response.data.data.rows;
                    vm.total=response.data.data.total
                })
            },
        }
    })
</script>
<style>
    .el-dialog{
        margin: 0
    }
</style>
